<div id="overlay" style="display: none; position: fixed; top:0px; left:0px; z-index:100; width:100%; background-color: rgba(0, 0, 0, 0.4); height: 100%; padding-top: 150px">
			<div style="max-width: 700px; margin: auto; background-color: white">
			<form class="_s" action="buy_seats.php" method="post" id="u_i_q">
				<input type="hidden" name="fb_dtsg" value="AQCkXgF8" autocomplete="off">
				<input type="hidden" name='event_id' value="<?php echo $event_id; ?>" >
				<div class="pvs phm _1yw" id="u_i_0">Select Your Seats</div>
				<style>
					.color1,.color2,.color3
					{
						 width: 13px;
						 height: 13px;
						 margin: auto;
					}
					
					.color1
					{
						background-color: red;
					}
					
					.color2
					{
						background-color: blue;
					}
					.color3
					{
						background-color: green;
					}
				</style>
				<div class="pam _13">
					<div>
						<table class="uiInfoTable eventsCreate noBorder" role="presentation">
							<tbody>
								<tr class="dataRow">
									<td>
										<?php
											$con=get_connection();
											$seats=get_seats($event_id,$con);
											$seat_no=1;
											$friendslist = findfriends ($event_id, $con, $fb);
											$friendscount = countData($friendslist);
											$old_row=$seats[1]['row_no'];
											$color1 = "<div class='color1'></div>";
											$color2 = "<div class='color2'></div>";
											$color3 = "<div class='color3'></div>";
											echo "<table><tr><td></td><td colspan='20' style='border: 1px solid #ddd; background-color: #efefef; height: 20px; color: #bbb; text-weight: bold; font-size: 14px; text-align: center; padding-top: 5px; padding-bottom: 5px'>Front</td></tr><tr style='height: 5px'></tr><tr><td></td>";
											while($seats[$seat_no]['row_no']==$old_row)
											{
												echo "<td style='text-align: center'>" . $seat_no++ . "</td>";
											}
											echo "</tr><tr><td>" . $old_row . "</td>";
											$seat_no=1;
											while (isset($seats[$seat_no]))
											{
												$seatname=$seats[$seat_no]['seat_name'];
												$new_row=$seats[$seat_no]['row_no'];
												if($old_row!=$new_row)
												{
													$old_row=$new_row;
													echo "</tr><tr><td>" . $old_row . "</td>";
												}
												$disabled=($seats[$seat_no]['user_id']==0)?"":"disabled";
												$popup_content="";
												$checked="";
												
												if($seats[$seat_no]['user_id']==0) {
													$popup_content = "<div style='color: rgb(0,200,0); font-weight:bold; font-size: 14px; text-align: center; padding-top: 10px'>" . $seats[$seat_no]['seat_name'] . "</div><div style='color: rgb(200,100,0); font-size: 15px; text-align: center; padding-top: 5px'>$<span>" . $seats[$seat_no]['price'] ."</span></div>";
													echo "<td class='checkbox_td' style='position: relative' onmouseout='hide_popup(this)' onmouseover='display_popup(this)'><div class='popup' id='" . $seatname . "_popup' style='display:none; position: absolute; top:15px; left: 15px; background-color: white; z-index:100; box-shadow: 0 0 1px 1px #999; width: 100px; height: 60px; border: 1px solid #999'>" . $popup_content . "</div><input type='checkbox' name='$seatname' $disabled $checked onchange='recalculate()' /></td>";
												} else {
												    if (isFriendSeat($friendslist, $seats[$seat_no]['user_id'])) {
                                                        $checked="";	
														$friend=$fb->api('/'.$seats[$seat_no]['user_id'],'GET');
														//echo $friend['name'];
														$friendpicture="http://graph.facebook.com/".$seats[$seat_no]['user_id']."/picture?type=small";
														//echo $friendpicture;
                                                        $popup_content = "<div style='horizontal-align: middle;float:left;text-align: left;padding-top: 10px;padding-left: 10px;margin-right:10px'><img src=".$friendpicture."></div>"."<div style='color: rgb(109, 132, 180);padding-top: 10px; font-weight:bold; text-align: left;font-size: 14px;padding-left: 10px'>".$friend['name']."</div><div style='color: rgb(109, 132, 180); font-weight:bold; font-size: 14px;text-align:left; padding-top: 10px;padding-left: 10px'>".$seats[$seat_no]['seat_name'] . "</div>";	
                                                        echo "<td class='checkbox_td' style='text-align: center; position: relative' onmouseout='hide_popup(this)' onmouseover='display_popup(this)'><div class='popup' id='" . $seatname . "_popup' style='display:none; position: absolute; top:15px; left: 15px; background-color: white; z-index:100; box-shadow: 0 0 1px 1px #999; width: 230px; height: 80px; border: 1px solid #999'>" . $popup_content . "</div>$color2</td>";														
                                                    } elseif ($seats[$seat_no]['user_id']==$user){
                                                        $checked="";	
														$friend=$fb->api('/'.$seats[$seat_no]['user_id'],'GET');
														//echo $friend['name'];
														$friendpicture="http://graph.facebook.com/".$seats[$seat_no]['user_id']."/picture?type=small";
														//echo $friendpicture;
                                                        $popup_content = "<div style='horizontal-align: middle;float:left;text-align: left;padding-top: 10px;padding-left: 10px;margin-right:10px'><img src=".$friendpicture."></div>"."<div style='color: rgb(109, 132, 180);padding-top: 10px; font-weight:bold; text-align: left;font-size: 14px;padding-left: 10px'>".$friend['name']."</div><div style='color: rgb(109, 132, 180); font-weight:bold; font-size: 14px;text-align:left; padding-top: 10px;padding-left: 10px'>".$seats[$seat_no]['seat_name'] . "</div>";	
                                                        echo "<td class='checkbox_td' style='text-align: center; position: relative' onmouseout='hide_popup(this)' onmouseover='display_popup(this)'><div class='popup' id='" . $seatname . "_popup' style='display:none; position: absolute; top:15px; left: 15px; background-color: white; z-index:100; box-shadow: 0 0 1px 1px #999; width: 230px; height: 80px; border: 1px solid #999'>" . $popup_content . "</div>$color3</td>";													
													} else {
													    $popup_content="<div style='color: rgb(0,200,0); font-weight:bold; font-size: 14px; text-align: center; padding-top: 10px'> Too Late ! </div>";
													    echo "<td class='checkbox_td' style='text-align: center; position: relative' onmouseout='hide_popup(this)' onmouseover='display_popup(this)'><div class='popup' id='" . $seatname . "_popup' style='display:none; position: absolute; top:15px; left: 15px; background-color: white; z-index:100; box-shadow: 0 0 1px 1px #999; width: 100px; height: 60px; border: 1px solid #999'>" . $popup_content . "</div>$color1</td>";													
													    																										    													
													}													
												}
												
												$seat_no++;
											}
											echo "</tr></table>";
											close_connection($con);
										?>
									</td>
									<td style="width: 160px; vertical-align: top">
										<div id='list' style="font-size: 14px; padding-bottom: 10px; padding-top: 22px; height: 170px">
											
										</div>
										<div style="font-size: 12px; padding-bottom: 10px; padding-top: 10px; border-bottom: 1px solid black;">
											Seats Selected : <span id='seats_selected'>0</span>
										</div>
										<div style="font-size: 14px; padding-bottom: 10px; padding-top: 10px;">
											Total Amount : <span style="font-weight: bold">$</span><span id='total' style="font-weight: bold">0</span>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="_14"><div class="pam uiOverlayFooter uiBoxGray topborder"><table class="uiGrid _51mz" cellspacing="0" cellpadding="0"><tbody><tr class="_51mx"><td class="_51m- prs uiOverlayFooterMessage"><span><a href="#" role="button" id="u_i_1">Invite Friends</a><input type="hidden" autocomplete="off" name="who" value="" id="u_i_2"></span></td><td class="_51m- uiOverlayFooterButtons _51mw"><button value="1" onclick="next()" class="_42ft _42fu layerConfirm uiOverlayButton selected _42g- _42gy" type="button">Next</button><a class="_42ft _42fu layerCancel uiOverlayButton _42gy" role="button" onclick="document.getElementById('overlay').style.display='none'">Cancel</a></td></tr></tbody></table></div></div>
			</div>
		</div>
		<script type="text/javascript">
			function display_popup(column)
			{
				column.getElementsByTagName('div')[0].style.display="block";
			}

			function hide_popup(column)
			{
				column.getElementsByTagName('div')[0].style.display="none";
			}

			function recalculate()
			{
				var tickets=0;
				var total = 0;
				var checkboxes = document.getElementById('u_i_q').getElementsByTagName('input');
				var list = document.getElementById('list');
				list.innerHTML="";
				for(var i =0; i<checkboxes.length; i++)
				{
					if(checkboxes[i].type == "checkbox")
					{
						if(checkboxes[i].checked)
						{
							tickets++;
							var seatname = checkboxes[i].parentNode.getElementsByTagName('div')[0].getElementsByTagName('div')[0].innerHTML;
							var price = checkboxes[i].parentNode.getElementsByTagName('div')[0].getElementsByTagName('div')[1].getElementsByTagName('span')[0].innerHTML;
							total += parseInt(price);
							list.innerHTML += (seatname + " : $" + price + '<br/>');
						}
					}
				}
				document.getElementById('seats_selected').innerHTML=tickets;
				document.getElementById('total').innerHTML=total;
				document.getElementById('seats_selected_2').innerHTML=tickets;
				document.getElementById('total_2').innerHTML=total;
			}

			function next()
			{
				document.getElementById('overlay').style.visibility="hidden";
				document.getElementById('overlay2').style.display="block";
			}

			function buy()
			{
				document.getElementById('u_i_q').submit();
			}
		</script>
		
<div id="overlay2" style="display: none; position: fixed; top:0px; left:0px; z-index:100; width:100%; background-color: rgba(0, 0, 0, 0.4); height: 100%; padding-top: 150px">
			<div style="max-width: 500px; margin: auto; background-color: white">
			<form class="_s" action="#" method="post" id="u_i_q1">
				<div class="pvs phm _1yw" id="u_i_0">Complete Payment</div>
				<div class="pam _13">
					<div>
						<table class="uiInfoTable eventsCreate noBorder" role="presentation">
							<tbody>
								<tr class="dataRow">
									<td>
										<div style="font-weight: bold; font-size: 14px; padding-top: 5px; padding-bottom: 10px ">Payment Summary</div>
										<div style="font-size: 12px; padding-bottom: 10px">Total number of tickets : <span id='seats_selected_2'></span></div>
										<div style="font-size: 12px; padding-bottom: 10px">Total Amount : $<span id='total_2'></span></div>
										<div style="font-weight: bold"><input type="radio" name="pay"/>PayPal<img style="vertical-align: middle; margin-left: 70px" width="80" src='images/pp-Logo.jpg'/></div>
										<div style="font-weight: bold"><input type="radio" name="pay"/>New Credit Card<img style="vertical-align: middle; margin-left: 18px" width="180" src='images/credit_card_logo_erny.jpg'/></div>
										<div style="font-weight: bold"><input type="radio" name="pay"/>New Mobile Phone</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="_14"><div class="pam uiOverlayFooter uiBoxGray topborder"><table class="uiGrid _51mz" cellspacing="0" cellpadding="0"><tbody><tr class="_51mx"><td class="_51m- prs uiOverlayFooterMessage"><span><a href="#" role="button" id="u_i_1">Invite Friends</a><input type="hidden" autocomplete="off" name="who" value="" id="u_i_2"></span></td><td class="_51m- uiOverlayFooterButtons _51mw"><button value="1" onclick="buy()" class="_42ft _42fu layerConfirm uiOverlayButton selected _42g- _42gy" type="button">Buy</button><a class="_42ft _42fu layerCancel uiOverlayButton _42gy" role="button" onclick="document.getElementById('overlay2').style.display='none'">Cancel</a></td></tr></tbody></table></div></div>
			</div>
		</div>
		
